<template>
	<view class="mask" @touchmove.stop.prevent>
		<view class="ts-content">
			<view class="ts-content-title" v-if="false">
				<image @click="close()" class="ts-content-title-close" src="../../static/close1.png" mode="aspectFill">
				</image>
				<text class="ts-content-title-text"></text>
			</view>
			<view class="ts-content-subhead">
				<!-- <view class="ts-content-subhead-row-width-and-justify-content ts-content-subhead-time-text">
					<text>开始时间</text>
					<text>结束时间</text>
				</view> -->
				<view class="time-title">
					<view class="time-title-left" @click="startOrEnd = !startOrEnd">
						<image v-if="!startOrEnd" src="../../static/icon1/cs1.png" mode="aspectFit"></image>
						<text style="font-size: 26rpx;" v-else>开始时间</text>
					</view>
					<view class="time-title-right" @click="startOrEnd = !startOrEnd">
						<image v-if="startOrEnd" src="../../static/icon1/cs2.png" mode="aspectFit"></image>
						<text style="font-size: 26rpx;" v-else>结束时间</text>
					</view>
				</view>
				<view class="ts-content-subhead-ledgement">
					<view class="ts-content-subhead-ledgement-content"></view>
				</view>
				<view class="ts-content-subhead-row-width-and-justify-content ts-content-subhead-slect-text">
					<text @click="startOrEnd=false">{{leftTime}}</text>
					<text @click="startOrEnd=true" :style="{color:rightTime=='请选择'?'#999':''}">{{rightTime}}</text>
				</view>
				<view class="ts-content-subhead-yellow-block-view">
					<view :class="!startOrEnd?'ts-content-subhead-yellow-block':''"></view>
					<view :class="startOrEnd?'ts-content-subhead-yellow-block':''"></view>
				</view>
			</view>
			<view class="ts-content-time-info-view">
				<pdsb :style="{zoom:zoomInt}" style="position: relative">
					<pdst ref="hour" :listData="hourList" v-model="hour" type="cycle" :isTomorrow="isEndTomorrow"
						:startOrEnd="startOrEnd">
					</pdst>
					<view class="ts-content-time-info-view-semicolon">:</view>
					<pdst ref="minute" :listData="minuteList" type="cycle" v-model="minute"></pdst>
				</pdsb>
			</view>
			<view class="ts-content-button-view">
				<view class="ts-content-button-view-box">
					<view class="cancel-z" @click="close()">取 消</view>
					<view class="confirm-z">
						<view class="ts-content-button-no" v-show="!isButtonOk">确 认</view>
						<view class="ts-content-button-yes" @click="getTime()" v-show="rightTime!='请选择'&&isButtonOk">确 认
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import pdsb from '@/components/pdSelect/selectBox.vue'
	import pdst from '@/components/pdSelect/selectitem.vue'
	export default {
		name: "time-select",
		props: {
			timeFlag: {
				type: Number,
				default: 0
			},
			typeTi: {
				type: Number,
				default: 0
			}
		},
		components: {
			pdsb,
			pdst,
		},
		data() {
			return {
				listData: Array.from({
					length: 23
				}, (value, index) => 1 + index),
				listData2: Array.from({
					length: 6
				}, (value, index) => (index * 10) == 0 ? '00' : index * 10),
				lastDay: Array.from({
					length: 11
				}, (value, index) => '次日 ' + (0 + index)),
				hourList: [],
				minuteList: [],
				hour: 1,
				minute: 1,
				zoomInt: 1,
				leftTime: '请选择',
				rightTime: '请选择',
				// isStartTomorrow: false,
				isEndTomorrow: false,
				startOrEnd: false,
				strarTimeList: [0, 0],
				endTimeList: [0, 0],
				isButtonOk: false,
			};
		},
		watch: {
			hour() {
				this.getLeftAndRightTime()
				if (!this.startOrEnd) {
					if (this.equHourByStartTime(this.strarTimeList[0])) {
						let listM = this.listData2.slice(0)
						this.minuteList = listM
						this.$refs.minute.init()
					} else {
						this.getToDay(this.judgeHourAndMinute(this.strarTimeList[0], this.strarTimeList[1]))
					}
				} else {
					if (this.equHourByEndTime(this.endTimeList[0])) {
						let listM = this.listData2.slice(0)
						this.minuteList = listM
						this.$refs.minute.init()
					} else {
						this.getEndTime()
					}
				}
			},
			minute() {
				this.getLeftAndRightTime()
			},
			startOrEnd() {
				if (this.startOrEnd) {
					this.getEndTime()
				} else {
					this.assignmentHourAndMin(this.strarTimeList[0], this.strarTimeList[1])
					this.getToDay(this.judgeHourAndMinute(this.strarTimeList[0], this.strarTimeList[1]))
				}
				this.isButtonOk = this.startOrEnd
				this.listInit()
			}
		},
		methods: {
			getToDay(flag) {
				let day_0 = new Date();
				day_0.setDate(day_0.getDate());
				let hh = parseInt(day_0.format("hh"));
				let mm = parseInt(day_0.format("mm")) + 30;
				mm = Math.ceil(mm / 10) * 10;
				hh = mm >= 60 ? hh + 1 : hh
				if (hh > 24) {
					hh = 1
					mm = 0
					uni.showToast({
						title: '请发布明日任务',
						icon: 'none'
					})
					setTimeout(() => {
						this.close()
					}, 800)
				}
				mm = mm >= 60 ? (mm - 60) : mm
				let listH = this.listData.slice(0)
				let listM = this.listData2.slice(0)
				if (this.timeFlag == 1) {
					hh = 1
					mm = 0
				}
				listH.splice(0, listH.indexOf(hh))
				listM.splice(0, listM.indexOf(mm))
				this.hourList = listH
				this.minuteList = listM
				this.minute = flag ? this.strarTimeList[1] : mm
				this.hour = flag ? this.strarTimeList[0] : hh
				this.getLeftAndRightTime()
			},
			getEndTime() {
				let hh = this.strarTimeList[0] + 1
				let mm = this.strarTimeList[1];
				mm = Math.ceil(mm / 10) * 10;
				mm = mm >= 60 ? (mm - 60) : mm
				let listH = hh >= 24 ? [] : this.listData.slice(0)
				hh = hh >= 24 ? '次日 ' + (hh - 24) : hh
				listH = listH.concat(this.lastDay)
				let listM = this.listData2.slice(0)
				listH.splice(0, listH.indexOf(hh))
				listM.splice(0, listM.indexOf(mm))
				this.hourList = listH
				this.minuteList = listM
				this.minute = mm
				this.hour = hh
				this.getLeftAndRightTime()
			},
			judgeHourAndMinute(hour, minute) {
				let day_0 = new Date();
				day_0.setDate(day_0.getDate());
				let h = parseInt(day_0.format("hh"));
				let m = Math.ceil((parseInt(day_0.format("mm")) + 30) / 10) * 10;
				hour = parseInt(hour)
				minute = parseInt(minute)
				let resule = hour == h ? (m > minute ? false : true) : h > hour ? false : true
				return resule
			},
			judgeEndHourAndMinute(hour, minute) {
				if (hour.toString().includes('次日')) return true
				let h = this.strarTimeList[0]
				let m = this.strarTimeList[1]
				hour = parseInt(hour)
				minute = parseInt(minute)
				let resule = hour == h ? (m > minute ? false : true) : h > hour ? false : true
				return resule
			},
			getLeftAndRightTime() {
				let mm = this.minute == 0 ? '00' : this.minute
				if (this.startOrEnd) {
					this.isEndTomorrow = this.hour.toString().includes('次日') ? true : false
					let r = this.judgeEndHourAndMinute(this.hour, this.minute)
					if (r) {
						this.rightTime = this.hour + ':' + mm
						this.endTimeList = [this.hour, this.minute]
					}
				} else {
					this.leftTime = this.hour + ':' + mm
					this.strarTimeList = [this.hour, this.minute]
				}
			},
			init() {
				this.hourList = Array.from({
					length: 23
				}, (value, index) => 1 + index)
				this.minuteList = Array.from({
					length: 6
				}, (value, index) => index * 10)
				this.zoomInt = uni.getSystemInfoSync().screenWidth / 420
				this.zoomInt = this.zoomInt < 1 ? this.zoomInt = 1 : this.zoomInt
				this.getToDay()
			},
			listInit() {
				this.$refs.hour.init()
				this.$refs.minute.init()
			},
			close() {
				this.$emit('close')
			},
			equHourByStartTime(hour) {
				let day_0 = new Date();
				day_0.setDate(day_0.getDate());
				let h = parseInt(day_0.format("hh"));
				hour = parseInt(hour)
				let resule = hour == h ? false : true
				return resule
			},
			equHourByEndTime(hour) {
				let h = parseInt(this.strarTimeList[0]) + 1
				hour = parseInt(hour)
				let resule = hour == h ? false : true
				return resule
			},
			formatDate(date) {
				let d = date,
					month = '' + (d.getMonth() + 1),
					day = '' + this.typeTi == 1 ? d.getDate() + 1 : d.getDate(),
					year = d.getFullYear(),
					hour = d.getHours(),
					mm = d.getMinutes();
				if (month.toString().length < 2) month = '0' + month;
				if (day.toString().length < 2) day = '0' + day;
				if (hour.toString().length < 2) hour = '0' + hour;
				if (mm.toString().length < 2) mm = '0' + mm;
				return [([year, month, day].join('-')), ([hour, mm, '00'].join(':'))].join(' ');
			},
			getTime() {
				let day_0 = new Date(Date.parse(new Date()))
				day_0.setDate(day_0.getDate() + this.timeFlag)
				day_0.setHours(this.strarTimeList[0])
				day_0.setMinutes(this.strarTimeList[1])
				day_0.setSeconds(0)
				let day_1 = new Date(Date.parse(new Date()))
				let endDay = this.isEndTomorrow ? 1 : 0
				day_1.setDate(day_1.getDate() + endDay + this.timeFlag)
				day_1.setHours(this.isEndTomorrow ? this.endTimeList[0].split(' ')[1] : this.endTimeList[0])
				day_1.setMinutes(this.endTimeList[1])
				day_1.setSeconds(0)
				let time = [this.formatDate(day_0), this.formatDate(day_1)]
				this.$emit('getTaskTime', time)
			},
			assignmentHourAndMin(hour, minute) {
				this.hour = hour
				this.minute = minute
			},
			compareStartAndEndTime(listStart, listEnd) {
				if (listStart[0] != 0 && listEnd[0] != 0) {
					return this.judgeEndHourAndMinute(listEnd[0], listEnd[1])
				}
			},
		},
		beforeMount() {
			this.init()
		},
	}
</script>
<style lang="less" scoped>
	.mask {
		z-index: 501;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.40);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ts-content {
		width: 750rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		border-radius: 25rpx 25rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ts-content-title {
		width: 690rpx;
		height: 107rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 36rpx;
	}

	.ts-content-title-close {
		width: 23rpx;
		height: 23rpx;
	}

	.ts-content-title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
		line-height: 36rpx;
		text-align: center;
		flex-grow: 1;
	}

	.ts-content-subhead {
		width: 750rpx;
		// height: 166rpx;
		border-bottom: 1rpx solid #E4E4E4;
		display: flex;
		flex-direction: column;
		align-items: center;

		.time-title {
			width: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 1px 4rpx #f5f5f5;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			border-radius: 5rpx;

			// padding-top: 50rpx;
			// padding-bottom: 40rpx;
			// border: 1px solid;
			.time-title-left {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				color: #000;

				// padding: 10rpx 0;
				// font-size: 26rpx;
				// border: 1px solid;
				// padding: 20rpx 0;
				image {
					width: 280rpx;
					height: 80rpx;
				}
			}

			.time-title-right {
				flex: 1;
				// padding: 20rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #000;

				// padding: 10rpx 0;
				// border: 1px solid;
				image {
					width: 300rpx;
					height: 80rpx;
				}
			}
		}
	}

	.ts-content-subhead-row-width-and-justify-content {
		width: 456rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.ts-content-subhead-time-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #ABABAB;
		line-height: 28rpx;
		margin-top: 36rpx;
	}

	.ts-content-subhead-slect-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
		line-height: 36rpx;
	}

	.ts-content-subhead-ledgement {
		height: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ts-content-subhead-ledgement-content {
		width: 48rpx;
		height: 4rpx;
		background: #000000;
	}

	.ts-content-subhead-yellow-block-view {
		width: 456rpx;
		height: 36rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.ts-content-subhead-yellow-block {
		width: 80rpx;
		height: 8rpx;
		border-radius: 25rpx;
		background: #F39B19;
	}

	.ts-content-button-view {
		height: 128rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		z-index: 9;

		.ts-content-button-view-box {
			width: 80%;
			margin: 0 auto;
			// border: 1px solid;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.cancel-z {
			width: 38%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #F5F5F5;
			border-radius: 10rpx;
			color: #000;
			font-size: 30rpx;
			font-weight: 600;
			// letter-spacing: 2rpx;
			// border: 1px solid;
		}

		.confirm-z {
			width: 38%;
		}
	}

	.ts-content-button-no {
		width: 100%;
		height: 80rpx;
		background: #ABABAB;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.ts-content-time-info-view {
		width: 750rpx;
		height: 400rpx;
		min-height: 220px;
		background: #FFFFFF;
		// margin-top: 30rpx;
		// position: relative;
	}

	.ts-content-time-info-view-semicolon {
		font-size: 18px;
		font-weight: bold;
		color: #000000;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 4;
	}

	.ts-content-button-yes {
		width: 100%;
		height: 80rpx;
		background: #FCC928;
		border-radius: 12rpx;
		font-size: 30rpx;
		text-align: center;
		font-weight: bold;
		color: #402110;
		line-height: 80rpx;
	}
</style>